<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <filter id="f1">
          <feFlood flood-color="#0ff" flood-opacity="1" result="p1"></feFlood>
          <feFlood flood-color="#01f" flood-opacity="1" result="p2"></feFlood>

          <feOffset in="p2" dx="0" dy="0" />

          <feBlend in="p1" in2="SourceGraphic" mode="multiply" />
        </filter>
      </defs>
      <circle cx="10" cy="10" r="5" style="fill: #011" />
      <circle cx="50" cy="50" r="30" fill="#ff0" filter="url(#f1)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
          <filter id="f2">
            <feFlood flood-color="#ff0" flood-opacity="1" result="p1"></feFlood>
            <feBlend in="p1" in2="SourceGraphic" mode="darken" />
          </filter>
        </defs>
        <image href="../imgs/4.png" x="0" y="0" height="100" width="100" filter="url(#f2)"/>
      </svg>

    <script src="index.js"></script>
  </body>
</html>
